import React, { Component } from 'react';
import { connect } from 'dva';
import { Card, Badge, Table, Divider, Input, Form, Row, Col, Button, Select, DatePicker, InputNumber, Tooltip } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import DescriptionList from '../../components/DescriptionList';
import styles from './List.less';
import globalConstant from "../../utils/globalConstant";

const { Description } = DescriptionList;
const FormItem = Form.Item;
const { Option } = Select;
const progressColumns = [{
  title: '时间',
  dataIndex: 'time',
  key: 'time',
}, {
  title: '当前进度',
  dataIndex: 'rate',
  key: 'rate',
}, {
  title: '状态',
  dataIndex: 'status',
  key: 'status',
  render: text => (
    text === 'success' ? <Badge status="success" text="成功" /> : <Badge status="processing" text="进行中" />
  ),
}, {
  title: '操作员ID',
  dataIndex: 'operator',
  key: 'operator',
}, {
  title: '耗时',
  dataIndex: 'cost',
  key: 'cost',
}];

@connect()
@Form.create()
export default class OperatManagement extends Component {
  state={
    userOrderInfo: {
      userId: null,
      address: null,
      name: null,
      phoneNumber: null,
      comboType: null,
      distanceExpiration: null,
      originalExpiration: null,
      currentTime: null,
    },
    goodsData: [
      {
        id: '1234561',
        name: '矿泉水 550ml',
        barcode: '12421432143214321',
        price: '2.00',
        num: '1',
        amount: '2.00',
        operator: '张三',
        orderTime: '2017-1-1',
      },
      {
        id: '1234562',
        name: '凉茶 300ml',
        barcode: '12421432143214322',
        price: '3.00',
        num: '2',
        amount: '6.00',
        operator: '张三',
        orderTime: '2017-1-1',
      },
      {
        id: '1234563',
        name: '好吃的薯片',
        barcode: '12421432143214323',
        price: '7.00',
        num: '4',
        amount: '28.00',
        operator: '张三',
        orderTime: '2017-1-1',
      },
      {
        id: '1234564',
        name: '特别好吃的蛋卷',
        barcode: '12421432143214324',
        price: '8.50',
        num: '3',
        amount: '25.50',
        operator: '张三',
        orderTime: '2017-1-1',
      },
    ],
    basicLoading: false,
  }
  componentDidMount() {
    // const { dispatch } = this.props;
    // dispatch({
    //   type: 'profile/fetchBasic',
    // });
  }
  handleSubmit =(e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  }
  handleSearch = (value) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'userBroad/fetch',
      payload: {

        pageNum: globalConstant.paging.defaultPageNum,
        pageSize: globalConstant.paging.defaultPageSize,
      },
    });
  }
  render() {
    const { goodsData, basicLoading, userOrderInfo } = this.state;
    const { getFieldDecorator } = this.props.form;
    const dateFormat = 'YYYY/MM/DD';
    const buttonDisabled = userOrderInfo.userId !== null && userOrderInfo.userId !== '';
    console.log(userOrderInfo.userId);
    console.log('buttonDisabled', buttonDisabled)
    const goodsColumns = [{
      title: '用户ID',
      dataIndex: 'id',
      key: 'id',
    }, {
      title: '类型',
      dataIndex: 'name',
      key: 'name',
    }, {
      title: '区域',
      dataIndex: 'barcode',
      key: 'barcode',
    }, {
      title: '购买套餐',
      dataIndex: 'price',
      key: 'price',
      align: 'right',
    }, {
      title: '带宽',
      dataIndex: 'num',
      key: 'num',
      align: 'right',
    }, {
      title: '金额',
      dataIndex: 'amount',
      key: 'amount',
      align: 'right',
    }, {
      title: '操作员',
      dataIndex: 'operator',
      key: 'operator',
      align: 'right',
    }, {
      title: '订单时间',
      dataIndex: 'orderTime',
      key: 'orderTime',
      align: 'right',
    }];

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 8,
        },
      },
    };
    return (
      <PageHeaderLayout title="后台操作用户业务">
        <Card bordered={false}>
          <DescriptionList size="large" title="用户信息" style={{ marginBottom: 32 }}>
            <Description term="用户ID">
              <Input.Search
                placeholder="请输入用户ID"
                onSearch={(value) => { this.handleSearch(value); }}
                style={{ width: 200 }}
                enterButton
              />
            </Description>
            <Description term="地址">{userOrderInfo.address}</Description>
            <Description term="姓名">{userOrderInfo.name}</Description>
            <Description term="手机">{userOrderInfo.phoneNumber}</Description>
            <Description term="原用套餐">{userOrderInfo.comboType}</Description>
            <Description term="距离过期时间">{userOrderInfo.distanceExpiration}</Description>
            <Description term="原过期时间">{userOrderInfo.originalExpiration}</Description>
            <Description term="当前时间">{userOrderInfo.currentTime}</Description>
          </DescriptionList>
          <Divider style={{ marginBottom: 32 }} />
          <Card>
            <Form onSubmit={this.handleSubmit}>
              <FormItem
                {...formItemLayout}
                label="用户ID"
              >
                {getFieldDecorator('userId', {
                  initialValue: userOrderInfo.userId,
                })(
                  <Input disabled style={{ width: '50%' }} />
                )}
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="指定套餐"
              >
                {getFieldDecorator('packageType', {
                  rules: [{
                    required: true, message: '请选择套餐',
                  }],
                })(
                  <Select style={{ width: '50%' }}>
                    <Option value="86">+86</Option>
                    <Option value="87">+87</Option>
                  </Select>
                )}
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="到期时间"
              >
                {getFieldDecorator('expirationTime', {
                  rules: [{
                    required: true, message: '请选择到期时间',
                  }],
                })(
                  <DatePicker format={dateFormat} style={{ width: '50%' }} />
                )}
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="金额"
              >
                {getFieldDecorator('money', {
                })(
                  <InputNumber style={{ width: '50%' }} />
                )}
              </FormItem>
              <FormItem
                {...formItemLayout}
                label="更改原因"
              >
                {getFieldDecorator('cause', {
                  rules: [{
                    required: true, message: '请输入更改原因',
                  }],
                })(
                  <Input.TextArea placeholder="请输入更改原因" autosize={{ minRows: 3 }} style={{ width: '50%' }} />
                )}
              </FormItem>
              <FormItem {...tailFormItemLayout}>
                <Tooltip title="如果要修改用户套餐请先查询用户ID" visible={!buttonDisabled} defaultVisible={false}>
                  <Button type="primary" htmlType="submit" disabled={!buttonDisabled}>保存</Button>
                </Tooltip>
              </FormItem>
            </Form>
          </Card>
          <Divider style={{ marginBottom: 32 }} />
          <div className={styles.title}>操作清单</div>
          <Table
            style={{ marginBottom: 24 }}
            pagination={false}
            loading={basicLoading}
            dataSource={goodsData}
            columns={goodsColumns}
            rowKey="id"
          />
        </Card>
      </PageHeaderLayout>
    );
  }
}
